<template>
  <div class="flex flex-col gap-y-2">
    <h3 class="font-extrabold text-xl text-orange-400">
      package.json中，单独引入了`swiper`，并不是哪里独立使用了，只是为了引入他的ts定义
    </h3>
    <h3 class="font-extrabold text-3xl">
      显示个数由内容大小决定，每次切换一个
    </h3>
    <div>
      <Swiper
        class="my-swiper-container"
        :modules="[SwiperAutoplay, SwiperEffectCreative]"
        slides-per-view="auto"
        :loop="true"
        :autoplay="{ delay: 3000, disableOnInteraction: false }"
        :space-between="20"
      >
        <SwiperSlide v-for="i in 7" :key="i">
          <NuxtImg
            class="w-[360px] h-[280px]"
            preload
            loading="lazy"
            :src="`/png/${i}.png`"
          />
        </SwiperSlide>
      </Swiper>
    </div>
    <h3 class="font-extrabold text-3xl mt-10">仅显示一个，且单个切换</h3>
    <div>
      <Swiper
        class="w-[360px] h-[280px]"
        :modules="[SwiperAutoplay, SwiperEffectCreative]"
        :slides-per-view="1"
        :loop="true"
        :autoplay="{ delay: 2000, disableOnInteraction: false }"
        :space-between="20"
      >
        <SwiperSlide v-for="i in 7" :key="i">
          <NuxtImg
            class="w-[360px] h-[280px]"
            preload
            loading="lazy"
            :src="`/png/${i}.png`"
          />
        </SwiperSlide>
      </Swiper>
    </div>
    <h3 class="font-extrabold text-3xl mt-10">3个一组进行切换</h3>
    <div>
      <Swiper
        class="my-swiper-container"
        :modules="[SwiperAutoplay, SwiperEffectCreative]"
        :loop="true"
        :slides-per-group="3"
        :slides-per-view="3"
        :autoplay="{ delay: 2000, disableOnInteraction: false }"
        :space-between="20"
      >
        <SwiperSlide v-for="i in 7" :key="i">
          <NuxtImg
            class="w-[360px] h-[280px]"
            preload
            loading="lazy"
            :src="`/png/${i}.png`"
          />
        </SwiperSlide>
      </Swiper>
    </div>
    <h3 class="font-extrabold text-3xl mt-10">
      通过autoplay属性设置自动播放相关配置，但初始化后立刻暂停，然后通过JS
      API手动控制什么时候播放
    </h3>
    <div>
      <Swiper
        class="my-swiper-container"
        :modules="[SwiperAutoplay, SwiperEffectCreative]"
        @swiper="onSwiper"
        :loop="true"
        :autoplay="{ delay: 3000, disableOnInteraction: false }"
        :slides-per-group="3"
        :slides-per-view="3"
        :space-between="20"
      >
        <SwiperSlide v-for="i in 7" :key="i">
          <NuxtImg
            class="w-[360px] h-[280px]"
            preload
            loading="lazy"
            :src="`/png/${i}.png`"
          />
        </SwiperSlide>
      </Swiper>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Swiper } from "swiper/types";
function onSwiper(_swiper: Swiper) {
  console.log("_swiper", _swiper);
  _swiper.autoplay.stop();
  setTimeout(() => {
    _swiper.autoplay.start();
  }, 1000);
}
</script>

<style scoped lang="scss">
.my-swiper-container {
  width: auto !important;
  .swiper-slide {
    width: auto !important;
  }
}
</style>
